import React, { ReactElement } from 'react'
import { connect } from 'umi'

interface Props {
    name?: number,
    add?: any,
    fn?: any
}

// interface IState {
//     about?: Object
// }

function About(props: Props): ReactElement {
    const { name, add, fn } = props
    return (
        <div>
            <h3>
                我是测试组件  --- {name}
            </h3>
            <button onClick={() => {
                add()
            }}>点我</button>

            <button onClick={() => {
                fn()
            }}>点我执行异步</button>
        </div>
    )
}

const mapState = (state: any) => {
    const { about } = state
    const { name } = about
    return {
        name
    }
}

const mapDispatch = (dispatch: Function) => {
    return {
        add() {
            dispatch({ type: "about/add" })
        },
        fn() {
            dispatch({ type: "about/query" })
        }
    }
}

export default connect(mapState, mapDispatch)(About)
